<!-- 
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2021/07/08 01:55:14
  @file: VmodelTest.vue
  @description:
  ```
  [迁移v-model非兼容](https://v3.cn.vuejs.org/guide/migration/v-model.html#v-model)
  v-model 替代 双向 sync 语法
  
  <comp v-model="data"></comp>
  // 等效于
  <comp :modelValue="data" @update:modelValue="data=$event"></comp>
  ```
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <button
    class="VmodelTest"
    @click="$emit('update:model-value', modelValue + 1)"
  >
    counter: {{ modelValue }}
  </button>
  <input
    type="text"
    :value="name"
    @input="$emit('update:name', $event.target.value)"
  />
  <input
    type="text"
    :value="password"
    @input="$emit('update:password', $event.target.value)"
  />
</template>

<script>
export default {
  name: "VmodelTest",
  /**
   * 本来用特定的model 需要在model属性上定义 但是被废除了，同时外部调用组件 也废除了 .sync
   * 改用 v-model:名字的="值"  多个绑定的形式
   *
   * 保留了如下的调用形式
   * <comp
   *    :属性名="数值"
   *    @update:属性名="数值=$event"
   * ></comp>
   */
  props: {
    modelValue: {
      type: Number,
      default: 0,
    },
    name: String,
    password: String,
  },
  emits: ["update:model-value", "update:name", "update:password"],
};
</script>

<style>
.VmodelTest {
  cursor: pointer;
}
</style>
